<template>
  <a-card :bordered="false" title="">
    <a-timeline>
      <a-timeline-item  v-for='item in historyOption' :key="item.id">
        <p>
          {{ JSON.parse(item.afterContent).updateTime?moment(JSON.parse(item.afterContent).updateTime).format('YYYY-MM-DD HH:mm:ss'):moment(JSON.parse(item.afterContent).createTime).format('YYYY-MM-DD HH:mm:ss')}}
          {{ JSON.parse(item.afterContent).updateBy?JSON.parse(item.afterContent).updateBy:JSON.parse(item.afterContent).createBy}} {{item.dataContent}}</p>
        <p v-for='j in item.childlist' :key="j.id">{{j.dataContent}}</p>
      </a-timeline-item>
    </a-timeline>
  </a-card>
</template>

<script>
import { getAction } from '@api/manage'
import moment from 'dayjs'
export default {
  name: 'TslStep',
  props:{
    dataId:{
      type: String,
      required: false
    },
    dataTable:{
      type: String,
      required: false
    },
    dataArray: {
      type: Array,
      required: false,
      default: function () {
        return []
      }
    }
  },
  components: {

  },
  data() {
    return {
      historyOption: [],
      moment
    }
  },
  created() {

  },
  mounted() {
    if(this.dataArray && this.dataArray.length > 0){
      this.historyOption = this.dataArray
    }else{
      this.$nextTick(()=>{
        this.loadOption();
      })
    }
  },
  watch: {
    // 监听传入值的变化
    dataId(newValue, oldValue) {
      // 当值变化时，调用方法
      this.loadOption();
    }
  },
  computed: {

  },
  methods:{
    loadOption(){
      if(!this.dataId){
        return;
      }
      getAction('/sys/dataLog/list/log',{
        dataId: this.dataId,
        dataTable: this.dataTable
      }).then(res=>{
        console.log('获得得结果',res)
        if(res.success && res.result.length > 0){
          // this.historyOption.splice(this.historyOption, 0, res.result);
          this.historyOption.push(... res.result)
          // console.log('履历：',this.historyOption)
        }
      })
    },
  }
}
</script>

<style scoped>

</style>